<template>
	<view class="timeline">
		<view
		  v-for="(date, index) in timeline"
		  :key="index"
		  class="day-section"
		  @click="handleClick"
		>
		  <view class="day-header">
			<text class="day-date">
				<text style="font-size: 30rpx;padding: 2rpx;">
				{{ date.mouth }}</text>月
				<text style="font-size: 30rpx;padding: 2rpx;">
				{{date.day}}</text>日
			</text>
			<text class="divider" ></text>
			<text class="day-label">{{ date.label }}</text>
		  </view>
		  <view class="underline"></view>
		  <view class="schedule">
			<text v-if="date.schedule">{{ date.schedule }}</text>
			<text v-else>暂时还没有安排</text>
		  </view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
//定义数据结构
interface TimelineItem {
  mouth:number;
  day:number;
  label: string;
  schedule: string | null;
}

//接收父组件传入的时间线数据
const props = defineProps<{
	timeline:TimelineItem[]
}>()

//点击事件
const handleClick = ()=>{
	const emit =defineEmits(['click'])
	emit('click')
}
</script>

<style>
.timeline {
  .day-section {
    margin-bottom: 30rpx;
	
    .day-header {
      display: flex;
      align-items: center;

      .day-date {
        font-size: 24rpx;
        font-weight: bold;
        color: #000;
      }
	  .divider {
		border-radius: 50rpx;
		background-color: gray;
		height: 4rpx;
		width: 4rpx;
		margin: 5rpx
		
	  }
      .day-label {
		  margin-top: 4rpx;
        font-size: 15rpx;
        color: #999;
		font-weight: bold;
		
      }
    }
    .underline {
	  border-radius: 45rpx;
	  width: 40rpx;
      height: 10rpx;
      background-color: #29D696;
	  margin-top: 5rpx;
	  margin-bottom: 15rpx;

    }
    .schedule {
      background-color: #ECF8F4;
      padding: 20rpx;
      border-radius: 10rpx;
      text-align: center;
      color: #999;
      font-size: 20rpx;
    }
    .bg-grey {
      color: #999;
      margin-right: 10rpx;
    }
  }
}
</style>